<template>
  <el-dialog width="930px" v-model="showDialog" :close-on-click-modal="false" :modal-append-to-body="false" :close-on-press-escape="false">
    <template #header>
      <span>打印机信息</span>
    </template>
    <!-- <el-form inline class="detail-form">
      <el-form-item :label="item.label" v-for="(item, index) in detailData" :key="index" :style="{ border: item.label ? '1px solid #e4e4e4' : '' }">
        <div>{{ item.value }}</div>
      </el-form-item>
    </el-form> -->
    <el-row class="b" style="border-width: 0.5px">
      <el-col :span="12" flex class="b" style="border-width: 0.5px" v-for="(item, index) in detailData" :key="index">
        <div style="background-color: #f2f3f6; padding: 6px 8px; width: 100px" flex="main:center cross:center" class="br tc item">
          {{ item.label }}
        </div>
        <div class="item sle" style="padding: 6px 8px; flex: 1">{{ item.value }}</div>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-blur @click="showDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
// import { http } from '@/api'
// import { showReqError } from '@/hooks/useError'

const showDialog = ref(false)
const detailData = ref([])

/**
 * 父组件调弹框显示方法
 */
const show = (row) => {
  showDialog.value = true
  detailData.value = []
  handleDetailData(JSON.parse(JSON.stringify(row)))
  // findCategoryById(row.id)
}
/**
 * 获取详情
 */
/* const findCategoryById = async (id) => {
  const params = { id }
  // console.log(params)
  try {
    let res = await http('findGoodsById', params)
    if (res.isError) return showReqError(res)

    handleDetailData(res.content)
  } catch (error) {
    console.log(error)
  }
} */

/**
 * 处理详情数据
 */
const handleDetailData = (data) => {
  console.log(data)
  // console.log(data.receiptType)

  const keysMap = new Map([
    ['storeName', '归属店铺'],
    ['customPrinterName', '打印机名'],
    ['receiptType', '打印用途'],
    ['type', '端口类型'],
    ['sizeType', '纸张大小'],
    ['orgName', '创建组织'],
    ['status', '状态'],
    ['', ''],
    ['creator', '创建人'],
    ['modifier', '更新人'],
    ['createTime', '创建时间'],
    ['modifyTime', '更新时间']
  ])
  // console.log(keysMap)

  keysMap.forEach((key, value) => {
    // console.log(key, value, data[value])

    if (value === 'status') {
      switch (data[value].toString()) {
        case '1':
          data[value] = '已启用'
          break
        case '-1':
          data[value] = '已停用'
          break
        default:
          break
      }
    }

    // ...
    if (value === 'receiptType') {
      console.log(data[value].toString())
      switch (data[value].toString()) {
        case '0':
          data[value] = '前台打印'
          break
        case '1':
          data[value] = '后厨打印'
          break
        case '2':
          data[value] = '传菜打印'
          break
        case '3':
          data[value] = '外卖打印机'
          break
        default:
          data[value] = '其他类型'
      }
    }
    // ...
    if (value === 'type') {
      switch (data[value].toString()) {
        case '0':
          data[value] = 'USB'
          break
        case '1':
          data[value] = '网口'
          break
        case '2':
          data[value] = '串口'
          break
        case '3':
          data[value] = '蓝牙'
          break
        case '4':
          data[value] = '驱动'
          break
        case '5':
          data[value] = '并口'
          break
        case '6':
          data[value] = '其他类型'
          break
        default:
          data[value] = '其他类型'
      }
    }
    // ...
    if (value === 'sizeType') {
      switch (data[value].toString()) {
        case '0':
          data[value] = '58mm'
          break
        case '1':
          data[value] = '80mm'
          break
        case '2':
          data[value] = '35*25mm'
          break
        case '3':
          data[value] = '40*30mm'
          break
        default:
          data[value] = '其他类型'
      }
    }

    // if (value !== 'sequence' && value !== 'goodsType' && value !== 'hotTag' && value !== 'minSell') {
    //   switch (data[value]) {
    //     case 0:
    //       data[value] = '否'
    //       break
    //     case 1:
    //       data[value] = '是'
    //       break
    //     default:
    //       break
    //   }
    // }

    if (value === 'createTime' || value === 'modifyTime') {
      data[value] = dayjs(data[value]).format('YYYY-MM-DD HH:mm:ss')
    }

    detailData.value.push({
      label: key,
      value: data[value]
    })
  })
}

defineExpose({ show })
</script>
<style lang="scss" scoped></style>
